<template>
    <el-header style="background-color:#fff">
        <el-menu
            :default-active="'1'"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            text-color="#000"
            background-color="#fff"
            active-text-color="#ff7f50"
        >
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">工具</el-menu-item>
            <el-menu-item index="3">文档</el-menu-item>
            <el-menu-item index="4">社区</el-menu-item>
        </el-menu>
        <MobileMenu v-if="this.$store.state.content !== 'home'" />
    </el-header>
</template>

<script>
import MobileMenu from '@/components/MobileMenu.vue'
export default {
    components: {
        MobileMenu,
    },
    methods: {
        handleSelect(key) {
            this.$store.commit('setAsideData', key)
            if (key !== '1') this.$store.commit('setContent', 'cards')
            const actions = {
                '1': ['setContent', 'home'],
                '2': ['setMainData', '前端工具'],
                '3': ['setMainData', 'vue'],
                '4': ['setMainData', '博客'],
            }
            this.$store.commit(actions[key][0], actions[key][1])
        },
    },
}
</script>
